<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.js"></script>
    <style>
        .swiper {
            width: 800px;
            height: 500px;
            overflow: hidden;
            background-color: aqua;
        }

        .swiper img {
            width: 800px;
            height: 500px;
        }
    </style>
</head>

<body>

    <div id="wrap">
        <banner></banner>

    </div>



    <template id="demo">
        <div class="swiper">
            <div class="swiper-wrapper" ref="banner">
                <div class="swiper-slide" v-for="item,index   in imglist" :key="index"><img :src="item" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </template>





</body>
<script>

    /*
    生命周期的执行时间要远远的快于网络请求
    swiper初始化的时候没有数据 计算的滚动层的宽度0， 无法滚动
    数据请求回来，页面元素渲染出来看起来没有什么问题，滚动层的宽度没有更新还是0 
    */
    Vue.component('banner', {
        template: '#demo',
        data() {
            return {
                imglist: []
            }
        },
        created() {
            setTimeout(() => {
                // 数据获取
                // 获取数据 会更新视图
                this.imglist = ['https://img2.baidu.com/it/u=620363004,1006350725&fm=253&fmt=auto&app=138&f=JPEG?w=777&h=500',
                    'https://img0.baidu.com/it/u=2613030917,3295397611&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=349',
                    'https://img1.baidu.com/it/u=3574802546,3162948955&fm=253&fmt=auto&app=138&f=JPG?w=499&h=280',
                    'https://img2.baidu.com/it/u=2838569243,3789381&fm=253&fmt=auto&app=120&f=JPEG?w=690&h=458']
                // $nextTick方法会等dom先获取，再去获取数据
                // 使用方法：
                // this.$nextTick(操作dom的相关函数)
                // 在工作中如果遇到了数据请求需要依赖某个视图的情况
                // 并且数据请求的时间比较滞后，那么我们就可以用$nextTick来解决这一问题
                this.$nextTick(() => {
                    // dom获取
                    var mySwiper = new Swiper('.swiper', {
                        loop: true, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    })
                })
            }, 50)
            // 1. 数据发生改变
            // 2. 根据数据的改变来更新视图（异步过程）
            // nextTick
            // 让数据引发的视图改变，等获取到数据之后再执行
            // 让dom先获取，再去获取dom的数据
        },
        mounted() {
            // var mySwiper = new Swiper('.swiper', {
            //     loop: true, // 循环模式选项
            //     // 如果需要分页器
            //     pagination: {
            //         el: '.swiper-pagination',
            //     },
            //     // 如果需要前进后退按钮
            //     navigation: {
            //         nextEl: '.swiper-button-next',
            //         prevEl: '.swiper-button-prev',
            //     },
            // })
        }
    })


    new Vue({
        el: '#wrap',

    })



</script>

</html>